<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="html" uri="http://struts.apache.org/tags-html" %>
<%@ taglib prefix="bean" uri="http://struts.apache.org/tags-bean" %>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>

<html:form action="/customer" styleId="simpleCustomerForm">
    <html:hidden property="customerBean.id" styleId="customerId"/>
    <table>
        <caption>
            <bean:message key="modal.add.transaction.customer.table.caption"/>
        </caption>
        <tbody>
            <tr>
                <td><bean:message key="modal.add.transaction.customer.first.name"/></td>
                <td>
                    <html:text property="customerBean.firstName" styleId="customerFirstName"/>
                    <div id="autocompleteFirstName" class="autocomplete"></div>
                </td>
            </tr>
            <tr>
                <td><bean:message key="modal.add.transaction.customer.last.name"/></td>
                <td>
                    <html:text property="customerBean.lastName" styleId="customerLastName"/>
                    <div id="autocompleteLastName" class="autocomplete"></div>
                </td>
            </tr>
            <tr>
                <td><bean:message key="modal.add.transaction.customer.phone"/></td>
                <td>
                    <html:text property="customerBean.phone" styleId="customerPhone"/>
                    <div id="autocompletePhone" class="autocomplete"></div>
                </td>
            </tr>
            <tr>
                <td><bean:message key="modal.add.transaction.customer.cell.phone"/></td>
                <td>

                    <html:text property="customerBean.cellPhone" styleId="customerCellPhone"/>
                    <div id="autocompleteCellPhone" class="autocomplete"></div>
                </td>
            </tr>
            <tr>
                <td><bean:message key="modal.add.transaction.customer.email"/></td>
                <td>
                    <html:text property="customerBean.email" styleId="customerEmail"/>
                    <div id="autocompleteEmail" class="autocomplete"></div>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2" align="center">
                    <html:reset>
                        <bean:message key="modal.customer.button.clear"/>
                    </html:reset>
                    <html:submit property="submittedValue" styleId="confirmCustomerForm">
                        <bean:message key="modal.customer.button.confirm"/>
                    </html:submit>
                    <html:submit property="submittedValue" styleId="addCustomerForm">
                        <bean:message key="modal.customer.button.add"/>
                    </html:submit>
                </td>
            </tr>
        </tfoot>
    </table>
</html:form>

<script type="text/javascript">
    document.forms['simpleCustomerForm'].reset();
    new Ajax.Autocompleter("customerFirstName", "autocompleteFirstName", "<c:url value='/customer/autocomplete.do'/>", {
        updateElement : getSelectionId
    });

    new Ajax.Autocompleter("customerLastName", "autocompleteLastName", "<c:url value='/customer/autocomplete.do'/>", {
        updateElement : getSelectionId
    });

    new Ajax.Autocompleter("customerPhone", "autocompletePhone", "<c:url value='/customer/autocomplete.do'/>", {
        updateElement : getSelectionId
    });

    new Ajax.Autocompleter("customerCellPhone", "autocompleteCellPhone", "<c:url value='/customer/autocomplete.do'/>", {
        updateElement : getSelectionId
    });

    new Ajax.Autocompleter("customerEmail", "autocompleteEmail", "<c:url value='/customer/autocomplete.do'/>", {
        updateElement : getSelectionId
    });

    function getSelectionId(li) {
        XT.doAjaxAction('updateCustomer', li, {customerId : li.id});        
    }
</script>